<script lang="ts" setup>
import {ref,watch,onMounted,onUnmounted} from 'vue'
import { loginSeriver,registerSerive } from '@/api/login'

import {useUserStore} from '@/stores/moudle/user.ts'
import {useRouter} from 'vue-router'
import { operationLogAddSerive } from '@/api/operationlog.js'
interface formData {
  username:number | null
  password:string
  repassword:string

}
const useStore = useUserStore()
const router = useRouter()
// 精确验证规则类型（移除冗余定义）
type ValidationRule = {
  required?: boolean
  message: string
  trigger: 'blur' | 'change'
  min?: number
  max?: number
  pattern?: RegExp
  validator?: (
    rules: any,
    value: string,
    callback: (error?: Error) => void
  ) => void
}
const form = ref()
const defaultData:formData = {
  username:null,
  password:'',
  repassword:'',
}
const rules = {
   username:[
    {required:true,message:'请输入账号',trigger:'blur'},
    {min:5,max:16,message:'账号必须是 5-16 位的非空数字',trigger:'blur'},
   ],
   password:[
    {pattern:/^\S{6,15}$/,message:'密码必须是 6-15 位的非空字符',trigger:'blur'}
   ],
   repassword:[
     {pattern:/^\S{6,15}$/,message:'密码必须是 6-15 位的非空字符',trigger:'blur'},
     {
       validator:(rules:any,value:any,callback:any)=>{
           if(value !== formModel.value.password){
            callback(new Error('两次输入密码不一致！，请重新输入'))
           }else{
            callback()
           }
       }
     }
   ]
}

const Login =async ()=>{
  await form.value.validate()
  const res =  await loginSeriver(formModel.value)
   useStore.setToken(res.data.token)
   useStore.getUserinfo()
    await  operationLogAddSerive({
    operation_type:'登录操作',
    details:`在登录模块进行了登录操作`,
    level:1
  })
  ElMessage.success('登录成功！')
  router.push('/home')
  
}
const Register= async()=>{
  await form.value.validate()
  //  开始注册
  await registerSerive(formModel.value)
  ElMessage.success('注册成功！')
  shownLogin.value = true
}
const formModel = ref<formData>(defaultData)
const shownLogin = ref<boolean>(true)


watch(shownLogin,()=>{
  formModel.value = defaultData
})


// // 监听窗口大小变化
 
// // 创建响应式变量存储窗口尺寸
// const windowSize = ref({
//   width: window.innerWidth,
//   height: window.innerHeight
// });
 
// // 更新窗口尺寸的函数
// const updateWindowSize = () => {
//   windowSize.value = {
//     width: window.innerWidth,
//     height: window.innerHeight
//   };
// };
 
// // 生命周期管理
// onMounted(() => {
//   window.addEventListener('resize', updateWindowSize);
//   // 初始立即调用一次
//   updateWindowSize();
//   console.log(windowSize.value)
  
// });
 
// onUnmounted(() => {
//   window.removeEventListener('resize', updateWindowSize);
//     console.log(windowSize.value)
// });

</script>
<template >
    <div class="wrapped">
        <el-row :gutter="20">
            <!---左侧-->
            <el-col :span="12">
              <img src="../../assets/images/图片.jpg" alt="">
            </el-col>
            <!--右侧-->
            <el-col :span="6" :offset="3">
                <div class="login-regiter">
                
              <el-form v-if="shownLogin" :model="formModel" ref="form" :rules="rules">
                <h2>欢迎登录！</h2>
                 <el-form-item  prop="username">
                    <el-input prefix-icon="User" v-model="formModel.username"  placeholder="请输入账号"/>
                 </el-form-item>
                <el-form-item  prop="password">
                    <el-input type="password"  v-model="formModel.password"  :show-password="true"  prefix-icon="Lock" placeholder="请输入密码"/>
                 </el-form-item>
                 <el-form-item >
                    <div class="remeber">
                    <el-checkbox  label="记住密码" size="large" />
                     <el-link underline="never">忘记密码</el-link>
                    </div>
                </el-form-item>
                  <el-form-item >
                    <el-button type="primary" @click="Login">登录</el-button>
                 </el-form-item>
                 <el-form-item >
                    <el-link underline="never"  @click="shownLogin = false">去注册?</el-link>
                 </el-form-item>
              </el-form>
            <el-form v-else :model="formModel" ref="form" :rules="rules">
                <h2>欢迎注册！</h2>
                 <el-form-item prop="username">
                    <el-input prefix-icon="User" v-model="formModel.username"   placeholder="请输入账号"/>
                 </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="formModel.password" show-password="true"  prefix-icon="Lock" placeholder="请输入密码"/>
                 </el-form-item>
                <el-form-item prop="repassword">
                    <el-input type="password"  v-model="formModel.repassword"  show-password="true"  prefix-icon="Lock" placeholder="请再次输入密码"/>
                 </el-form-item>
                  <el-form-item >
                    <el-button type="primary" @click="Register">注册</el-button>
                 </el-form-item>
                 <el-form-item >
                    <el-link underline="false" @click="shownLogin = true">去登录?</el-link>
                 </el-form-item>
              </el-form>
         </div>
            </el-col>
        </el-row>
    </div>
</template>
<style lang="scss" scoped>
.wrapped{  
    img{
        width: 100%;
        height: 100%;
    }
    overflow: hidden;
    .el-col{
        min-height: 100vh;
    }
    .login-regiter{
        .el-form{
            padding: 0 40px;
            margin:150px 0;
          h2{
            font-size: 40px;
            margin: 40px 0;
          }
          .remeber{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            padding: 0 10px;
          }
          .el-button{
            width: 100%;
            margin:  0 auto;
          }

        }
    }
}

</style>